<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="assets/index.css">
</head>

<body>
    <div id="app">
        <el-container>
            <el-aside width="30%"></el-aside>
            <el-container>
                <el-header width="200px"></el-header>
                <el-container style="border: 1px solid black;">
                    <el-header height="200px">
                        <h1>图片同步模块，请粘贴旧平台页面网址：</h1>
                        <!-- 表单 -->
                        <el-form :inline="true" :model="form">
                            <el-form-item label="url">
                                <el-input v-model.trim="form.url" style="width:400px" placeholder="http://, https://">
                                </el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit">确定</el-button>
                            </el-form-item>
                        </el-form>
                        <span>{{form.url}}</span>
                    </el-header>
                    <el-main style="border-top: 1px solid black;height:500px;padding-top:0px;">
                        <h1 title="临时记录只保存最后100条, 用于操作提示（服务重启后消失）">临时记录</h1>
                        <div v-for="val in log">
                            <span>同步地址：{{val.request_url}}&nbsp;</span>
                            <span :title="val.images">同步图片数量：{{val.images.length}}</span>
                            <div style="margin-top:5px;">
                                <img v-for="img in val.images" :src="img" width="200px;" /> 
                            </div>
                            <hr/>
                        </div>
                    </el-main>
                </el-container>
            </el-container>
            <el-aside width="30%"></el-aside>
        </el-container>
    </div>
</body>
<!-- import Vue before Element -->
<script src="/assets/vue.js"></script>
<!-- import JavaScript -->
<script src="/assets/index.js"></script>
<!-- import axios -->
<script src="/assets/axios.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                visible: false,
                form: {
                    url: "http://"
                },
                log: [],
            }
        },
        mounted() {
            // alert(1)
            this.getList()
        },
        methods: {
            onSubmit() {
                if(!confirm("确认同步？")){
                    return
                }
                axios.post('/pull_image', this.form)
                    .then(res=> {
                        alert('操作完成')
                        this.getList()
                    })
                    .catch(err=> {
                        alert(err.response.data)
                        console.error('err:', err.response.data)
                    });

            },
            // 获取 操作记录 内存
            getList() {
                axios.get('/list', this.form)
                    .then(res => {
                        this.log = res.data
                    })
                    .catch(err => {
                        alert(err.response.data)
                        console.error('err:', err.response.data)
                    });
            }
        }
    })
</script>

</html>